<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>双飞翼布局</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .main>div {
        float: left;
    }

    .left {
        width: 300px;
        height: 100%;
        background: red;
        margin-left: -100%;
    }

    .right {
        width: 280px;
        height: 100%;
        background: blue;
        margin-left: -280px;
    }

    .middle {
        width: 100%;
        height: 100%;
        background: yellow;

    }

    .content {
        margin-left: 300px;
        margin-right: 280px;
    }
</style>

<body>
    <div class="main" style="height: 800px;">
        <div class="middle">
            <div class="content">
                中间
            </div>
        </div>
        <div class="left">
            左边
        </div>
        <div class="right">
            右边
        </div>
    </div>
</body>

</html>